<style lang="less">
@import "./login.less";
</style>

<template>
  <div class="login">
    <div class="loginTop">
      <div
        class="second_logo"
        style="
          line-height: 42px;
          height: 42px;
          padding-top: 70px;
          padding-left: 40px;
        "
      >
        <div style="color: #f6ca9d; line-height: 42px; height: 42px">
          <img
            src="../../assets/images/shuhua_new.png"
            style="width: 123px; height: 42px"
          />
        </div>
        <div class="divSplit"></div>
        <div
          style="
            color: #2bc9cf;
            display: inline-block;
            line-height: 42px;
            float: right;
            float: right;
            margin-top: 1px;
            margin-right: 11px;
            font-size: 26px;
          "
        >
          {{ $t("loginL.sysNameLogo") }}
        </div>
      </div>
      <!-- <div class="changeLange">
        <Dropdown trigger="click" @on-click="handleClickDropdown2">
          <a href="javascript:void(0)" style="color: #ffffff">
            <div class="demo-avatar">
              {{ $t("language") }}
            </div>
          </a>
          <Icon :size="18" type="md-arrow-dropdown" style="color: #ffffff" />
          <DropdownMenu slot="list">
            <DropdownItem name="ch">{{ $t("loginL.Chinese") }}</DropdownItem>
            <DropdownItem name="en">{{ $t("loginL.English") }}</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div> -->
    </div>
    <!-- width: 342px;height: 292px; -->
    <Row :style="mainFormStyle">
      <Col span="12" style="text-align: center">
        <!-- 动态计算margin-left -->
        <img
          src="../../assets/images/login/sub_logo.png"
          style="height: 422px"
        />
      </Col>
      <Col span="12">
        <div class="login-form">
          <div style="font-size: 30px; padding: 30px; color: #ffffff">
            {{ $t("loginL.welcomeLogin") }}
          </div>

          <Form
            ref="loginForm"
            :model="loginForm"
            :rules="loginFormRules"
            @keydown.enter.native="handleSubmit"
            style="margin: 10px 40px"
            v-if="$i18n.locale === 'zh-CN'"
          >
            <FormItem prop="phone">
              <Input
                prefix="md-person"
                :placeholder="$t('common.phonePlaceTips')"
                v-model="loginForm.phone"
              />
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                prefix="md-lock"
                :placeholder="$t('common.passwordPlaceTips')"
                v-model="loginForm.password"
              />
            </FormItem>
            <div style="line-height: 25px; height: 25px">
              <div style="float: left; color: #f1f1f1">
                <Checkbox v-model="rememberPwd">{{
                  $t("common.passwordTipsRemain")
                }}</Checkbox>
              </div>
              <div class="forget_pwd" @click="resetPwd">
                {{ $t("common.forgetPassword") }}？
              </div>
            </div>
            <FormItem>
              <Button
                @click="handleSubmit"
                type="primary"
                long
                :loading="loginLoading"
                style="margin-top: 35px; margin-bottom: 50px"
              >
                <span v-if="!loginLoading" style="letter-spacing: 5px">
                  {{ $t("login") }}</span
                >
                <span v-else> {{ $t("loginL.loginLoading") }}....</span>
              </Button>
            </FormItem>
          </Form>
          <Form
            ref="loginFormE"
            :model="loginFormE"
            :rules="loginFormRulesE"
            @keydown.enter.native="handleSubmitE"
            style="margin: 10px 40px"
            v-else
          >
            <FormItem prop="mail">
              <Input
                prefix="md-person"
                :placeholder="$t('common.emailPlaceTips')"
                v-model="loginFormE.mail"
              />
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                prefix="md-lock"
                :placeholder="$t('common.passwordPlaceTips')"
                v-model="loginFormE.password"
              />
            </FormItem>
            <div style="line-height: 25px; height: 25px">
              <div style="float: left; color: #f1f1f1">
                <Checkbox v-model="rememberPwd">{{
                  $t("common.passwordTipsRemain")
                }}</Checkbox>
              </div>
              <div class="forget_pwd" @click="resetPwd">
                {{ $t("common.forgetPassword") }}？
              </div>
            </div>
            <FormItem>
              <Button
                @click="handleSubmitE"
                type="primary"
                long
                :loading="loginLoading"
                style="margin-top: 35px; margin-bottom: 50px"
              >
                <span v-if="!loginLoading" style="letter-spacing: 5px">
                  {{ $t("login") }}</span
                >
                <span v-else> {{ $t("loginL.loginLoading") }}....</span>
              </Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
import { isEmpty } from "@/libs/util";

export default {
  data() {
    return {
      lang: "中文",
      mainFormStyle: {
        marginTop: "0px",
      },
      loginLoading: false,
      imgShow: false,
      loginForm: {
        phone: "",
        password: "",
      },
      loginFormE: {
        mail: "",
        password: "",
      },
      loginFormRules: {
        phone: [
          {
            required: true,
            message: this.$t("common.phoneMustTips"),
            trigger: "blur",
          },
          {
            type: "string",
            pattern: "^[1][3-9][0-9]{9}$",
            message: this.$t("common.phoneFormate"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("common.passwordMustTips"),
            trigger: "blur",
          },
        ],
      },
      loginFormRulesE: {
        mail: [
          {
            required: true,
            message: this.$t("common.emailMust"),
            trigger: "blur",
          },
          {
            type: "string",
            pattern: "^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$",
            message: this.$t("common.emailFormate"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("common.passwordMustTips"),
            trigger: "blur",
          },
        ],
      },
      rememberPwd: false,
    };
  },
  methods: {
    ...mapActions(["handleLogin", "handleLoginE", "getUserInfo"]),
    ...mapMutations(["setLocal"]),
    //语言选择
    handleClickDropdown2(name) {
      if (name === "ch") {
        this.lang = "中文";

        this.$i18n.locale = "zh-CN"; //这是在locale里Index.js定义的中文变量
      } else if (name === "en") {
        this.lang = "English";
        this.$i18n.locale = "en-US";
      }

      this.setLocal(this.$i18n.locale);
      window.location.reload();
    },
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loginLoading = true;
          this.handleLogin(this.loginForm).then(
            (res) => {
              this.loginSuc();
            },
            (error) => {
              console.log("登录异常：" + error);
              this.loginLoading = false;
              this.$Message.error(error.response.data.msg);
            }
          );
        }
      });
    },

    handleSubmitE() {
      
      this.$refs.loginFormE.validate((valid) => {
        
        if (valid) {
          this.loginLoading = true;
          this.handleLoginE(this.loginFormE).then(
            (res) => {
              this.loginSuc();
            },
            (error) => {
              console.log("登录异常：" + error);
              this.loginLoading = false;
              this.$Message.error(error.response.data.msg);
            }
          );
        }
      });
    },
    loginSuc() {
      //如果记住密码了，则本地保存
      if (this.$i18n.locale === "zh-CN") {
        if (this.rememberPwd) {
          localStorage.setItem("login_phone", this.loginForm.phone);
          localStorage.setItem("login_pwd", this.loginForm.password);
        } else {
          localStorage.setItem("login_phone", "");
          localStorage.setItem("login_pwd", "");
        }
      } else {
        if (this.rememberPwd) {
          localStorage.setItem("login_mail", this.loginForm.mail);
          localStorage.setItem("login_pwd", this.loginForm.password);
        } else {
          localStorage.setItem("login_mail", "");
          localStorage.setItem("login_pwd", "");
        }
      }

      this.getUserInfo().then((res) => {
        this.$router.push({
          name: this.$config.homeName,
        });
      });
    },
    resetPwd() {
      const { href } = this.$router.resolve({
        name: "resetPwd",
      });
      window.open(href, "_blank");
    },
  },
  created() {},
  mounted() {
    const exipred = this.$route.query.tokenExpired;
    console.log("是否过期：" + exipred);
    if (this.$route.query.tokenExpired) {
      this.$Message.error(this.$t("loginL.loginError"));
    }
    //动态调整高度
    var clientH =
      document.documentElement.clientHeight || document.body.clientHeight;
    //console.log("总高度：" + clientH)
    clientH = clientH - 422 - 110;
    //console.log("剩余高度：" + clientH)
    if (clientH < 0) {
      this.mainFormStyle.marginTop = "0px";
    } else {
      clientH = parseInt(clientH / 3);
      //前面元素抵消掉的距离
      clientH = clientH + 33;
      console.log("margin:" + clientH);
      this.mainFormStyle.marginTop = clientH + "px";
    }
    if (this.$i18n.locale === "zh-CN") {
      //如果有记住用户名密码
      const phone = localStorage.getItem("login_phone", "");
      const pwd = localStorage.getItem("login_pwd", "");
      if (!isEmpty(phone) && !isEmpty(pwd)) {
        this.loginForm.phone = phone;
        this.loginForm.password = pwd;
        this.rememberPwd = true;
      }
    } else {
      //如果有记住用户名密码
      const mail = localStorage.getItem("login_mail", "");
      const pwd = localStorage.getItem("login_pwd", "");
      if (!isEmpty(mail) && !isEmpty(pwd)) {
        this.loginFormE.mail = mail;
        this.loginFormE.password = pwd;
        this.rememberPwd = true;
      }
    }
  },
};
</script>
